<template>
	<view class="pagecon">
		<head-box></head-box>
		<view class="personalInfor-page-main">
			<view class="_main-top">
				<image class="_img" src="../../static/img/positionMarketbanner.png" mode="widthFix"></image>
			</view>
			<view class="personalInfor-page-main-box">
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>当前选择阵地</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="20"  v-model="organization_zdname" disabled="disabled"  type="text" placeholder="请输入组织或公司名称"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>组织名称</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="20"  v-model="organization_name"  type="text" placeholder="请输入组织或公司名称"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>使用人数</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="5"  v-model="organization_num"  type="text" placeholder="请输入阵地使用人数"/> 人
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>使用性质</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<picker class="_main-item-val-input" @change="handlePicker2" :value="isIndex2" :range="isArr2">
								{{isArr2[isIndex2]}}
						</picker>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>申请用途</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input"   v-model="organization_use"  type="text" placeholder="请输入阵地的用途"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>预约时间</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						<picker class="_main-item-val-input" mode="date" :value="organization_date" :start="organization_time"  @change="bindDateChange">
							{{organization_date}}
						</picker>
						<picker class="_main-item-val-input" mode="time" :value="organization_time" :start="organization_time"  @change="bindTimeChange">
							{{organization_time}}
						</picker>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>使用时长</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="5"  v-model="organization_length"  type="text" placeholder="请输入使用时长"/>时
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>联系人</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="5"  v-model="organization_contact"  type="text" placeholder="请输入联系人"/>
					</view>
				</view>
				<view class="_main-item">
					<view class="_main-item-chunk _main-item-label"><text>联系电话</text><text class="xing">*</text></view>
					<view class="_main-item-chunk _main-item-val">
						 <input cursorSpacing="10" class="_main-item-val-input" maxlength="11"  v-model="organization_phone"  type="text" placeholder="请输入联系电话"/>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="primary">确定预约</button>
		</view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				organization_zdname:'杭州市职工文化中心',
				organization_name:'杭州红动科技有限公司',
				organization_num:'20',
				isIndex2:0,
				isArr2:['未选择','使用性质A','使用性质B','使用性质C','使用性质D'],
				organization_use:'团建',
				organization_date:'请选择',
				organization_time:'请选择',
				organization_length:'8',
				organization_contact:'周汉美',
				organization_phone:'13398769876',
				endDate:'2022-04-11',
			};
		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
    methods:{
			handlePicker2(e) {
				this.isIndex2 = e.target.value
			},
			bindDateChange(e)
			{
				this.organization_date = e.target.value
			},
			bindTimeChange(e)
			{
				this.organization_time = e.target.value
			}
		}
	}
</script>

<style lang="scss">

	.btn{
		text-align: center;
		padding: 0 50rpx;
	}
	._main-top{
		width: 100%;
		._img{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.personalInfor-page-main{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		.personalInfor-page-main-box{
			width: 100%;
			margin-bottom: 40rpx;
			margin-top: 40rpx;
			._main-item{
				// height: 86rpx;
				border-bottom: 1px solid rgba(200,199,204,0.5);
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				._main-item-chunk{
					color: #000;
					line-height: 84rpx;
				}
				._main-item-label{
					width: 40%;
				}
				._main-item-val{
					width: 50%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					button{
						background-color: #dd524d;
						color: #FFFFFF;
					}
					._main-item-val-head{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						display: flex;
						.head-img{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					._main-item-val-input{
						width: 100%;
						text-align:right;
						margin-right: 10rpx;
						._main-item-val-input-text{
							display: flex;
							flex-wrap: nowrap;
							text-align: right;
						}
						.drop-dowm-img{
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
							transform: rotateZ(270deg);
						}
					}
					.drop-dowm-img{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						transform: rotateZ(270deg);
					}
				}
			}
		}
	}

	.xing
	{
		color: #ff0000;
		margin-left: 10rpx;
	}
</style>
